<template>
  <div id="app" :class="{unSelected:isUnSelect}">
    <SignView v-if="cur_nav==='0'"/>
    <CityMap v-if="cur_nav==='2'"/>
    <MapContainer/>
    <MainNav/>

    <UrbanTraffic v-if="cur_nav==='4'"/>
    <HomeView v-if="cur_nav==='1'"/>

    <OdAnalysis v-if="cur_nav==='3'"/>

    <Loading v-if="isLoadingShow"/>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import SignView from './components/signView.vue'
  import MapContainer from './components/mapContainer.vue'
  import MainNav from './components/mainNav.vue'
  import HomeView from './components/homeView.vue'
  import CityMap from './components/cityMap.vue'
  import OdAnalysis from './components/odAnalysis.vue'
  import UrbanTraffic from './components/urbanTraffic.vue'
  import Loading from './components/homeViews/Loading.vue'
  import eventBus from './util/event-bus'
  export default {
    name: 'App',
    data () {
      return {
        isUnSelect: false
      }
    },
    components: {
      SignView,
      MapContainer,
      MainNav,
      HomeView,
      CityMap,
      OdAnalysis,
      UrbanTraffic,
      Loading,
    },
    mounted(){
      eventBus.$on("DragStart",() => {
        this.isUnSelect = true;
      });
      eventBus.$on("DragStop",() => {
        this.isUnSelect = false;
      });
    },
    computed: {
      ...mapGetters(['cur_nav','loading_state']),
      isLoadingShow(){
        return this.loading_state;
      }
    },
    methods: {
      ...mapMutations(['updateCurNav']),
    }
  }
</script>

<style lang="scss">
  @import "../static/common/common.scss";
  #app {
    position: relative;
    width: 100%;
    min-height: $min-height;
    text-align: center;
    overflow: hidden;
  }
  .unSelected{
    -moz-user-select: none; -khtml-user-select: none; user-select: none;
  }
</style>
